<!--
 * @Author: zhw
 * @Date: 2025-08-08 00:13:17
 * @LastEditTime: 2025-08-12 21:40:23
 * @LastEditors: zhw 443844039@qq.com
 * @Description: 教学心旨
-->
<template>
  <div class="container">
    <el-row>
      <el-button type="primary" @click="handleClick('edit')">编辑</el-button>
      <el-button type="primary" @click="handleClick('import')">导入</el-button>
      <el-button type="primary" @click="handleExport()">导出</el-button>
    </el-row>
    <el-card class="box-card">
      <div class="title-container">
        <div class="title">教学经历及特色</div>
      </div>
      <div class="content-container">
        <el-descriptions :column="1">
          <el-descriptions-item label="教学经历">{{pageForm.teachingExperience || '暂无数据'}}</el-descriptions-item>
          <el-descriptions-item label="教学特色">{{pageForm.teachingFeatures || '暂无数据'}}</el-descriptions-item>
      </el-descriptions>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="title-container">
        <div class="title">教学理念</div>
      </div>
      <div class="content-container">
        <el-descriptions :column="1">
          <el-descriptions-item label="教学理念">{{pageForm.educationalPhilosophy || '暂无数据'}}</el-descriptions-item>
      </el-descriptions>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="title-container">
        <div class="title">教学宗旨</div>
      </div>
      <div class="content-container">
        <el-descriptions :column="1">
          <el-descriptions-item v-if="pageForm.goalStartDate" label="目标日期">{{pageForm.goalStartDate+'~'+pageForm.goalEndDate}}</el-descriptions-item>
          <el-descriptions-item v-else label="目标日期">暂无数据</el-descriptions-item>
          <el-descriptions-item label="目标">{{pageForm.educationalGoals || '暂无数据'}}</el-descriptions-item>
      </el-descriptions>
      </div>
    </el-card>
    <TheDetail ref="TheDetailRef" @refresh="setPageList()"/>
    <TheImport ref="TheImportRef" :importApi="teachingTenetImportApi" templateUrl='http://220.154.128.89:9443/statics/2025/09/17/教学心旨_20250917141554A012.xlsx' @uploadSuccess="setPageList()"/>
  </div>
</template>
<script>
import TheDetail from './TheDetail.vue'
import TheImport from '@/componentsView/TheImport.vue';
import { teachingTenetListApi, teachingTenetImportApi } from '@/api/teachingIdea/teachingTenet'
export default {
  name: 'TeachingTenetIndex',
  components: { TheDetail, TheImport },
  data() {
    return {
      teachingTenetListApi,
      teachingTenetImportApi,
      pageForm: {},
      tenetId: ''
    }
  },
  created() {
    this.getTeachingGradesList()
  },
  methods:{
    // 教学成绩List
    handleClick(action) {
      switch(action) {
        case 'edit':
          this.$refs.TheDetailRef.handleOpen(this.tenetId)
          break
        case 'import':
          this.$refs.TheImportRef.open();
          break;
        default:
         break
      }
    },

    async handleExport() {
      try {
        const params = {};
        await this.download('/jsjx/teacherTenet/export',params,`教学心旨.xlsx`);
        this.$message.success('导出成功');
      } catch (err) {
        this.$message.error('导出失败');
      }
    },

    async getTeachingGradesList() {
      try {
        const { rows } = await teachingTenetListApi()
        this.pageForm = rows[0];
        if (rows.length > 0) {
          this.tenetId = rows[0].tenetId;
        }
      } catch (error) {
        this.$message.error(error.message || '获取详情失败')
      }
    },

    setPageList(){
      this.getTeachingGradesList()
    }
  }
}
</script>
<style scoped lang="scss">
.container{
  padding: 12px;
}
.content-container{
  padding: 2px 24px;
}
.box-card{
  margin-top: 10px;
}
.title-container {
  padding-left: 12px;
  border-left: 3px solid #409eff;  /* 蓝色竖线样式 */
  margin-bottom: 10px;
}

.title{
  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
  font-weight: 650;
  font-size: 16px;
  padding-left: 10px;
  text-align: left;
}

::v-deep .el-alert{
  padding: 4px 16px;
}
::v-deep .el-textarea{
  margin-top: 10px;
}
</style>
